<template>
    <f7-page class="common-page has-bottom-btns">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>培训登记</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>

        <v-accordion title="培训信息" class="infoList noBorder" disabled>
            <van-form input-align="right" ref="form" :readonly="!canEdit" class="basic-form">
                <van-field v-model="models.model.trainSubject" :required="canEdit" label="培训主题"
                    :rules="[{ required: true, message: '请输入培训主题' }]" :type="canEdit ? 'input' : ''" placeholder="请输入">
                </van-field>
                <van-field readonly :required="canEdit" clickable name="datetimePicker" :value="models.model.trainDate"
                    label="培训时间" :rules="[{ required: true, message: '请选择培训时间' }]" placeholder="请选择"
                    :right-icon="canEdit ? 'arrow' : ''"
                    @click="canEdit ? (showPicker = true) : (showPicker = false)" />
                <van-field :required="canEdit" label="参会人员" placeholder="" readonly
                    label-width="100" input-align="right">
                    <template #button>
                        <span class="choose-span" @click="showPerson = true" v-if="canEdit">选择</span>
                    </template>
                    <template #input>
                        <span>{{ models.mobileTrainPersonList.map(v=>v.personName).join("、") }}</span>
                    </template>
                </van-field>
                <van-field :required="canEdit" label="现场照片" readonly class="field-pic">
                </van-field>
                <qm-file-upload ref="trainPic" :galleryOptions="{ multiple: true, maximum: 9 }" :disabled="!canEdit" v-if="models.model.trainId"
                    :params="{
                type: 'attach',
                dataKey: models.model.trainId,
                bizType: 'mobileTrainPic',
            }" uploadId="trainPic">
                </qm-file-upload>
            </van-form>
        </v-accordion>
        <f7-toolbar position="bottom" no-shadow class="fff" v-if="canEdit && !showPicker">
            <f7-button fill class="submit-btn" @click="onCommit">提交</f7-button>
        </f7-toolbar>
        <!-- 选择日期 -->
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="date" @confirm="onConfirm" @cancel="showPicker = false" :min-date="minDate"
                :max-date="maxDate" :value="currentDate" />
        </van-popup>
        <!-- 选择人员 -->
        <person-popup busiKey="personPkid" v-model="showPerson" url="/app/equipment/eqmPrjJobPerson/query" @save="surePerson"
            :chooseArr="models.mobileTrainPersonList" :extraParams="{engineeId: engineeId,useType:1}"></person-popup>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
import PersonPopup from "../components/PersonPopup.vue";
export default class instance extends controller {
    disableCache() {
        return true;
    }
    onInit() {
        this.context.pageAction = this.$f7route.query.pageAction;
        this.context.engineeId = this.$f7route.query.engineeId;
    }
    onBeforeInit() {
        this.urls = {
            model: "/app/equipment/eqmMobileTrain/getEntity"
        };
    }

    onAfterSave(isSuccess, result) {
        if (isSuccess) {
            this.$f7.views.current.router.back({ force: true });
        }
    }
    onAfterQuery(type, isSuccess, result) {
        if (type == 'form') {
            this.context.models.mobileTrainPersonList = result.models.mobileTrainPersonList || [];
        }
        return result;
    }
    mixin() {
        return {
            components: {
                PersonPopup
            },
            data() {
                return {
                    engineeId:'',
                    minDate: new Date(2024, 1, 1),
                    maxDate: new Date(2080, 12, 1),
                    currentDate: new Date(),
                    showPicker: false,
                    models: {
                        model: {

                        },
                        mobileTrainPersonList: []
                    },
                    pageAction: "",
                    showPerson: false,
                    engineeCode:''
                };
            },
            computed: {
                canEdit() {
                    return this.pageAction !== 'view'
                }
            },
            methods: {
                //确定验收时间
                onConfirm(time) {
                    this.models.model.trainDate = this.$formatter.formatDate(
                        time,
                        "yyyy-MM-dd"
                    );
                    this.showPicker = false;
                },
                //选择人员
                surePerson(personList) {
                    this.models.mobileTrainPersonList = JSON.parse(JSON.stringify(personList));
                },
                //提交
                onCommit() {
                    this.$refs.form.validate()
                        .then((res) => {
                            if (this.models.mobileTrainPersonList.length == 0) {
                                this.$toast("请选择参会人员")
                                return false
                            }
                            if (this.$refs.trainPic.getUploadedCount() < 1) {
                                this.$toast("请上传现场照片")
                                return false
                            }
                            this.models.pageAction = this.pageAction;
                            this.models.model.engineeId = this.engineeId;
                            this.$f7.request.post(
                                `/app/equipment/eqmMobileTrain/save`, this.models,
                                (r) => {
                                    r = JSON.parse(r);
                                    if (r && r.success) {
                                        this.$f7.dialog.alert("提交成功", () => {
                                            this.$f7router.back();
                                        })
                                    } else {
                                        this.$toast(r.message || "提交失败，请稍后重试");
                                    }
                                },
                                (err) => { }
                            );
                        })
                },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../assets/css/commonPage.less");

@{deep} .v-workflow-list {
    padding: 0 16px;
}

@{deep}.accordion .accordion-item>.item-link>.item-content {
    padding-left: 16px !important;
}

@{deep}.accordion.accordion-list {
    background-color: #fff;
    margin-bottom: 10px;
}

@{deep}.list input[type="text"] {
    height: 22px;
}

.basic-form {
    .choose-span {
        display: inline-block;
        padding-left: 16px;
        height: 15px;
        line-height: 15px;
        font-size: 13px;
        color: #3385ff;
        border-left: 1px solid #d7dce4;
    }

    @{deep}.van-field__control {
        font-size: 13px;
    }
}
@{deep}.field-pic.van-cell{
    &::after{
        border-bottom: none;
    }
}
</style>
